<template>
    <div>
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo menu-box"
        :default-active="active"
        text-color="#fff"
      >
      <!-- 遍历一级菜单
        1.如果一级菜单拥有二级菜单,使用el-sub-menu
          1-1:遍历二级菜单
            判断是否是一个可以路由的菜单,完成菜单的生成
        2.否则判断是否是一个可以路由的菜单,el-menu-item
        
        使用component完成icon组件的加载
        3.添加点击事件完成路由操作
       -->
        <!--遍历1级别菜单  -->
        <template v-for="(item,index) in routeList" :key="item.path">
        <!-- 1级菜单如果是Sub,完成显示并遍历子菜单 -->
          <el-sub-menu v-if="item.isSub" :index="item.path">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </template>
            <!-- 遍历子菜单 -->
            <el-menu-item 
              v-for="(vitem, vindex) in item.children" 
              :key="vitem.path" 
              :index="vitem.path"
              @click="showView"
              >
              <template #title>
                <span>{{vitem.title}}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <!-- 没有子菜单的1级菜单 -->
          <el-menu-item v-else-if="item.isItem" :index="item.redirect?item.redirect.path:item.path" @click="showView">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
</template>
<script>

import {routes} from "@/router/routes"
export default {
    data() {
      return {
        routeList:routes[0].children,
        active:"/home"
      }
    },
    mounted(){
      //console.log("test",this.$route) 
      //完成路由后,修改默认的菜单选项
      this.active=this.$route.path
    },
    methods: {
      //完成路由的跳转
      showView(e){
        //console.log(`output->e`,e)
        this.$router.push(e.index).then(()=>{
          //可以处理完成路由后的操作
        })
      }
    },
}
</script>
<style lang="scss" scoped>
    .menu-box{
      min-height: 500px;
    }
</style>